import { useState, useEffect } from 'react'
import { Form, Input, Button, Table, Space } from 'antd'
import { useForm } from 'antd/es/form/Form'
import api from '@/api'
import { message } from '@/utils/AntdGlobal'
import { Dept as DeptType } from '@/types/api'

const columns = [
  {
    title: '部门名称',
    dataIndex: 'deptName',
    key: 'deptName',
    width: 200
  },
  {
    title: '负责任',
    dataIndex: 'userName',
    key: 'userName',
    width: 150
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime'
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    render() {
      return (
        <Space>
          <Button type='text'>新增</Button>
          <Button type='text'>修改</Button>
          <Button type='text'>删除</Button>
        </Space>
      )
    }
  }
]
const Dept = () => {
  const [form] = useForm()
  const [tableData, setTableData] = useState<DeptType.DeptItem[]>([])

  const getTableData = () => {
    api
      .deptSelectAll()
      .then(res => {
        if (!res.success) {
          message.error(res.msg)
          return
        }

        setTableData(res.data)
      })
      .catch(err => console.log('请求部门数据时出现异常', err))
  }

  useEffect(() => {
    getTableData()
  }, [])

  return (
    <div className='dept'>
      <Form className='search-form' layout='inline' form={form}>
        <Form.Item label='部门名称' name='deptName'>
          <Input placeholder='部门名称' />
        </Form.Item>
        <Form.Item>
          <Button type='primary' className='mr10'>
            搜索
          </Button>
          <Button type='default'>重置</Button>
        </Form.Item>
      </Form>
      <div className='base-table'>
        <div className='header-wrapper'>
          <div className='title'>部门列表</div>
          <div className='action'>
            <Button type='primary'>新增</Button>
          </div>
        </div>
        <Table bordered rowKey='id' columns={columns} dataSource={tableData} pagination={false} />
      </div>
    </div>
  )
}
export default Dept
